<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HYUI</title>
        <link href="ui.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
        <script src="http://bbs.hyyyp.com/public/js/jquery.min.js"></script>
        <script src="hy.js"></script>
        <script src="slider.js"></script>
        

    </head>
    <body style="background:#DDD">
        <header class="hy-header hy-bo-b">
        <a class="hy-header-nav hy-header-left icon icon-menu" onclick="$.hy.canvas_show('right')">
            
        </a>
        
        <h1 class="hy-header-title">HY-WEB-UI</h1>
        <a class="hy-header-nav hy-header-right icon icon-menu" onclick="$.hy.canvas_show1('right')">
            
        </a>
        
        </header>
        <div class="hy-canvas-left ">
            asdsa
        </div>
        <div class="hy-canvas-right ">
            asdsa
        </div>
        <div class="col-md-12">
        <a href="#" onclick="$.hy.popover_bottom_show()">阿斯达asd</a>

                <button type="button" class="hy-btn">
                    默认
                </button>
                <div class="hy-btn hy-btn-primary">
                    蓝色
                </div>
                <span class="hy-btn hy-btn-success">
                    绿色
                </span>
                <button type="button" class="hy-btn hy-btn-warning">
                    黄色
                </button>
                <button type="button" class="hy-btn hy-btn-danger">
                    红色
                </button>
                <button type="button" class="hy-btn hy-btn-royal">
                    紫色
                </button>
        
         
                <button type="button" class="hy-btn hy-btn-outlined">
                    默认
                </button>
                <button type="button" class="hy-btn hy-btn-primary hy-btn-outlined">
                    操作
                </button>
                <button type="button" class="hy-btn hy-btn-success hy-btn-outlined">
                    成功
                </button>
                <button type="button" class="hy-btn hy-btn-warning hy-btn-outlined">
                    警告
                </button>
                <button type="button" class="hy-btn hy-btn-danger hy-btn-outlined">
                    危险
                </button>
                <button type="button" class="hy-btn hy-btn-royal hy-btn-outlined">
                    高贵
                </button>
                
                <button type="button" class="hy-btn hy-btn-link">
                    添加
                </button>
              <button type="button" class="hy-btn hy-btn-block">Block button</button>
                <button type="button" class="hy-btn hy-btn-primary hy-btn-block">Block button</button>
                <button type="button" class="hy-btn hy-btn-success hy-btn-block">Block button</button>
                <button type="button" class="hy-btn hy-btn-warning hy-btn-block">Block button</button>
                <button type="button" class="hy-btn hy-btn-danger hy-btn-block">Block button</button>
                <button type="button" class="hy-btn hy-btn-royal hy-btn-block">Block button</button>
                <button type="button" class="hy-btn hy-btn-block hy-btn-outlined">Block button</button>
                <button type="button" class="hy-btn hy-btn-primary hy-btn-block hy-btn-outlined">Block button</button>
                <button type="button" class="hy-btn hy-btn-success hy-btn-block hy-btn-outlined">Block button</button>
                <button type="button" class="hy-btn hy-btn-warning hy-btn-block hy-btn-outlined">Block button</button>
                <button type="button" class="hy-btn hy-btn-danger hy-btn-block hy-btn-outlined">Block button</button>
                <button type="button" class="hy-btn hy-btn-royal hy-btn-block hy-btn-outlined">Block button</button>
            
            <button type="button" class="hy-btn">Badge button <span class="hy-lable">1</span></button>
                <button type="button" class="hy-btn hy-btn-primary">Badge button <span class="hy-lable hy-lable-primary">2</span></button>
                <button type="button" class="hy-btn hy-btn-success">Badge button <span class="hy-lable hy-lable-success">12</span></button>
                <button type="button" class="hy-btn hy-btn-warning">Badge button <span class="hy-lable hy-lable-warning">121</span></button>
                <button type="button" class="hy-btn hy-btn-danger">Badge button <span class="hy-lable hy-lable-danger">999</span></button>
                <button type="button" class="hy-btn hy-btn-royal">Badge button <span class="hy-lable hy-lable-royal">999</span></button>
    <div style="background: #f65d5b;">
    <div class="hy-btn-nav">
        <ul class="flex_box">
          <li class="flex a"><a href="forum.php?mod=guide" class="gettab" tab="guide">推荐</a></li>
          <li class="flex"><a href="forum.php?mod=guide&amp;show=user" class="gettab" tab="user">订阅</a></li>
          <li class="flex"><a href="forum.php?mod=guide&amp;show=follow" class="gettab" tab="follow">关注</a></li>
        </ul>          
      </div>
</div>





        </div>
<div class="hy-fix-b hy-bo-t hy-footer-nav">
    <a href="" class="a">
        <span class="icon icon-menu"></span>test
    </a>

    <a href="">
        <span class="icon icon-menu"></span>test
    </a>
    <a class="" href="">
        <span class="hy-footer-c icon icon-menu"></span>
        asd
    </a>

    <a href="">
        <span class="icon icon-menu"></span>test
    </a>

    <a href="">
        <span class="icon icon-menu"></span>test
    </a>
</div>

<div class="hy-box hy-bo-b" >
    <div style="width:300px">asd</div>
</div>
<div class="hy-box hy-bo-b" >
    <div class="hy-menu-nav">
        <ul>
            <li class="a">
                <a href="">菜单1</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
            <li>
                <a href="">栏目2</a>
            </li>
        </ul>
    </div>
</div>
<div class="sliders">
  <div id="slider" class="sliderbox">
    <ul>
      <li>
        <a href="forum.php?mod=guide&amp;view=hot&amp;mobile=2" class="gettab" tab="guide"><img src=""/>
        <div class="title">这里是标题</div></a>
      </li>
      <li>
        <a href="plugin.php?id=cis_auction&amp;mobile=2" class="gettab" tab="cis_auction"><img src=""/>
        <!--<div class="title">这里是标题</div>--></a>
      </li>
      <li>
        <a href="home.php?mod=space&amp;do=home&amp;view=all&amp;mobile=2" class="gettab" tab="space_home"><img src=""/>
        <!--<div class="title">这里是标题</div>--></a>
      </li>
    </ul>
  </div>
  <span id="position" class="point"><em class="on"></em><em></em><em></em></span>
  <a href="javascript:slider.prev();" id="prev"></a><a href="javascript:slider.next();" id="next"></a>
</div>

<div class="hy-box">
    <div class="hy-input-box">
        <input type="text" placeholder="请输入用户名">
    </div>
</div>

<div class="hy-list">
    <a href="">
        <span class="icon icon-home"></span>
        <span class="title">asdasdasd</span>
        <span class="icon icon-chevron-right"></span>
    </a>
    <a href="">
        <span class="icon icon-home"></span>
        <span class="title">asdasdasd</span>
        <span class="icon icon-chevron-right"></span>
    </a>
    <a href="">
        <span class="icon icon-home"></span>
        <span class="title">asdasdasd</span>
        <span class="icon icon-chevron-right"></span>
    </a>
</div>

<div class="hy-cent-list">
  <ul>
    <li class="a"><a href="">帖子</a></li>
    <li><a href="">日记</a></li>
    <li><a href="" >照片</a></li>
    <li><a href="" >留言</a></li>
    <li><a href="" >资料</a></li>
  </ul>
</div>



<!-- <div class="hy-mess-box">
    <div style="    text-align: center;">
        <a href="">
            <span class="icon icon-notification"></span>
            asdasdsad
        </a>
    </div>
</div> -->
  
<!-- <div class="hy-iframe"></div> -->




<div style="height:200px"></div>
        <div class="hy-popover-bottom">
            <ul class="hy-table-view">
                <li class="hy-table-view-cell">
                    <a href="#">菜单1</a>
                </li>
                <li class="hy-table-view-cell">
                    <a href="#">菜单1</a>
                </li>
                <li class="hy-table-view-cell">
                    <a href="#">菜单1</a>
                </li>
            </ul>
            <ul class="hy-table-view">
                <li class="hy-table-view-cell">
                    <a href="#">菜单1 <span class="hy-lable hy-lable-warning">1</span></a>
                </li>
                <li class="hy-table-view-cell">
                    <a href="#">菜单1 <span class="hy-lable hy-lable-danger ">1</span></a>
                </li>
                <li class="hy-table-view-cell">
                    <a href="#" class="hy-font-danger">删除 <span class="hy-lable hy-lable-success">1</span></a> 
                </li>
            </ul>
        </div>
      
<div class="hy-box" style="height:200px">
    <div class="progress progress-success" id="progressNumber">
        <div style="width:50%">
            
        </div>
    </div>
    <div class="progress progress-info" id="progressNumber">
        <div style="width:50%">
            
        </div>
    </div>
    <div class="progress progress-warning" id="progressNumber">
        <div style="width:50%">
            
        </div>
    </div>
    <div class="progress progress-danger" id="progressNumber">
        <div style="width:50%">
            
        </div>
    </div>
</div>
<div class="hy-box" style="height:200px">
<label><input class="hy-switch" type="checkbox"> 默认未选中</label>
<label><input class="hy-switch" type="checkbox" checked> 默认选中</label>
<label><input class="hy-switch hy-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加hy-switch-animbg类即可</label>
<label><input class="hy-switch hy-switch-animbg" type="checkbox" checked> 默认选中</label>
<label><input class="hy-switch hy-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 hy-switch-anim
类即可</label>
<label><input class="hy-switch hy-switch-anim" type="checkbox" checked> 默认选中</label>


</div>
<style type="text/css">
    
</style>
<div class="hy-box" style="height:200px">
    <ul class="hy-lable-group">
        <li >
            <a href="" class="hy-lable hy-lable-success">Blog</a>
        </li>
        <li>
            <a href="" class="hy-lable hy-lable-zz">Blog</a>
        </li>
        <li>
            <span class="icon-reply"></span>
            
        </li>
    </ul>
</div>
<style type="text/css">
   

</style>

        <script type="text/javascript">

  $('.sliders').ready(function() {
var slider = new Swipe(document.getElementById('slider'), {
callback: function(e, pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
}),
bullets = document.getElementById('position').getElementsByTagName('em');    
  });
        </script>
    </body>
</html>